import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component {

  search = async () => {
    // 获取用户的输入 连续解构赋值-重命名  
    const { keyWordElement: { value: keyWord } } = this
    // const { keyWordElement: { value } } = this
    if(!keyWord.trim()) return;
    // 发送请求前通知List更新状态
    PubSub.publish('info', {isFirst:false, isLoading:true})

    //#region 发送网络请求 -- 使用axios发送
    /*axios.get(`/api1/search/users2?q=${keyWord}`).then(
      response => {
        console.log('成功了', response.data)
        // 请求成功后通知List更新状态
        PubSub.publish('info', {isLoading:false, users: response.data.items})
      },
      error => {
        console.log('失败了', error); 
        // 请求失败后通知List更新状态  
        PubSub.publish('info', {isLoading:false, err: error.message})
      }
    )*/
    //#endregion

    // 发送网络请求--使用fetch发送（未优化）
  //   fetch(`/api1/search/users2?q=${keyWord}`).then(
  //     response => {
  //       console.log(response)
  //       console.log('联系服务器成功了')
  //       return response.json()
  //     },
  //     error => {
  //       console.log('联系服务器失败了', error); 
  //       // 请求失败后通知List更新状态  
  //       PubSub.publish('info', {isLoading:false, err: error.message})
  //       // undefined
  //       return new Promise(()=>{})
  //     }
  //   ).then(
  //     response => {
  //       // 请求成功后通知List更新状态
  //       PubSub.publish('info', {isLoading:false, users: response.items})
  //     },
  //     error => {
  //       console.log('联系服务器失败了', error); 
  //     }
  //   )
  // }

  // 发送网络请求--使用fetch发送（优化）
  // fetch(`/api1/search/users2?q=${keyWord}`).then(
  //   response => {
  //     console.log(response)
  //     console.log('联系服务器成功了')
  //     return response.json()
  //   }
  // ).then(
  //   response => {
  //     // 请求成功后通知List更新状态
  //     PubSub.publish('info', {isLoading:false, users: response.items})
  //   }
  // ).catch(
  //   error => {
  //     console.log(error)
  //     // 请求失败后通知List更新状态  
  //     PubSub.publish('info', {isLoading:false, err: error.message})
  //   }
  // )
  try {
    const response = await fetch(`/api1/search/users2?q=${keyWord}`)
    const data = await response.json()
    PubSub.publish('info', {isLoading:false, users: data.items})
  } catch (error) {
    PubSub.publish('info', {isLoading:false, err: error.message})
  }
}

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search"/>&nbsp;<button onClick={this.search}>Search</button>
        </div>
      </section>
    )
  }
}
